<template>
	<view style="display: flex;background-color: #fff;border-radius: 5px;position: relative;">
		<image class="image" :src="sConf.pics + (product.cover ?? [])[0]?.url" mode="scaleToFill"
			style="border-radius: 5px 0 0 5px;width: 96px;height: 128px;" />
		<view style="padding: 5px;display: flex;flex-direction: column;justify-content: space-between;">
			<view style="font-size: small;"> {{ product.name }} </view>
			<view style="font-size: x-small;color: #999;">{{ product.jingle?.jingle }} </view>
			<view style="display: flex;gap: 2px;">
				<tn-icon v-if="product.is_share === 1" name="fire" color="#ff9a44" size="32"></tn-icon>
				<tn-icon v-if="product.is_master === 1" name="lucky-money" color="#ff6b6b" size="32"></tn-icon>
				<tn-icon v-if="product.exp > 0" name="flower" color="#96c93d" size="32"></tn-icon>
				<tn-icon v-if="product.point > 0" name="funds" color="#01beff" size="32"></tn-icon>
				<!--
				<tn-tag v-if="product.is_master === 1" type="info" shape="round" font-size="16" bg-color="#ff9a44"
					text-color="#fff">Rep</tn-tag>
				<tn-tag v-if="product.is_share === 1" type="info" shape="round" font-size="16" bg-color="#ff6b6b"
					text-color="#fff">Hot</tn-tag>
				<tn-tag v-if="product.exp > 0" type="info" shape="round" font-size="16" bg-color="#01beff"
					text-color="#fff">Exp</tn-tag>
				<tn-tag v-if="product.point > 0" type="info" shape="round" font-size="16" bg-color="#96c93d"
					text-color="#fff">积分</tn-tag>
				-->
				<tn-tag v-for="(tag, index) in product.tag" :key="index" type="info" shape="round" font-size="16"
					:bg-color="tag.bgcolor" :text-color="tag.color">{{ tag.name }}</tn-tag>
			</view>
			<view v-if="product.is_money == 1" class="price"
				style="display: flex;justify-content: space-between;align-items: center;">
				<view>
					<tn-icon name="money" size="20px"></tn-icon>
					<text style="color: #dd524d;padding: 0 5px;font-size: small;">{{ (product.price.price /
						100).toFixed(2) }}</text><text>元</text>
				</view>
				<text style="text-decoration: line-through; color: #999;font-size: x-small;">{{ (product.price.money /
					100).toFixed(2)}}</text>

			</view>
			<view v-if="product.is_point == 1" class="point">
				<view>
					<tn-icon name="funds" size="20px"></tn-icon>
					<text style="color: #007aff;padding-left: 5px;">{{ product.point ? product.point : 0 }}</text>
				</view>
			</view>
			<view style="font-size: x-small;color: #999;"> 热销: {{ product.hot ? product.hot : 0 }} 件</view>
		</view>

		<!--收藏按钮-->
		<tn-icon :name="product.is_like ? 'like-lack-fill' : 'like-lack'" size="48"
			:color="product.is_like ? '#dd524d' : '#000'" @tap.stop="likeChange"
			style="position: absolute;top: 0;right: 0;padding: 10px;"></tn-icon>
		<!--购物车-->
		<view style="position: absolute;bottom: 0;right: 0;padding: 10px;display: flex;align-items: center;gap: 5px;">
			<!--
			<tn-number-box v-model="curPayCount" :min="1" :max="product.cur_num" size="sm" bg-color="#fff"
				input-disabled></tn-number-box>
				-->
			<tn-icon name="cart-fill" size="48" color="#ff9a44" @tap.stop="cartChange"></tn-icon>
		</view>
	</view>
</template>

<script>
import utils from '@/common/utils';
export default {
	name: "sub-product-block",
	data() {
		return {
			sConf: getApp().globalData,
			curPayCount: 1,
		};
	},
	mounted() {
		console.log('mounted');
	},
	props: {
		product: {
			type: Object,
			default: null,
			required: false
		}
	},
	methods: {
		likeChange() {
			console.log('收藏产品');
			let host = this.sConf.host + '/weapps/favored/'
			let token = this.sConf.token || '';
			let data = {
				sid: this.sConf.auth.id,
				puid: this.product.id,
				status: this.product.is_like ? 0 : 1
			}
			utils.authenticatorPost(host, token, data).then((res) => {
				console.log('切换收藏夹', res);
				this.product.is_like = !this.product.is_like;
			});
		},
		cartChange() {
			console.log('加入购物车');
			let host = this.sConf.host + '/weapps/cart/';
			let token = this.sConf.token || '';
			let data = {
				sid: this.sConf.auth.id,
				puid: this.product.id,
				pid: this.product.pid,
				num: this.curPayCount,
				status: 1
			}
			utils.authenticatorPost(host, token, data).then((res) => {
				console.log('请求成功', res);
				if (res.rescode === 200) {
					uni.showToast({
						icon: 'success',
						title: '加入购物袋'
					})
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
/* 收藏选中 */
.like-active {
	color: #dd524d;
}

.like-normal {
	color: #000;
}
</style>